import React, { useState } from 'react';
import { Layout, Modal } from 'antd';
import UserProfile from './UserProfile';
import EditProfileForm from './EditProfileForm';

const User: React.FC = () => {
  const [user, setUser] = useState({
    name: '陈江华',
    email: 'shenjingchen@163.com',
    phone: '17724229015',
    address: '广州天河区',
  });

  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleEdit = () => {
    setIsModalVisible(true);
  };

  const handleSave = (updatedUser: { name: string; email: string; phone: string; address: string }) => {
    setUser(updatedUser);
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div>

      <UserProfile user={user} onEdit={handleEdit} />
      <Modal
        title="编辑个人信息"
        open={isModalVisible}
        footer={null}
        onCancel={handleCancel}
      >
        <EditProfileForm user={user} onSave={handleSave} onCancel={handleCancel} />
      </Modal>
    </div>
  );
};

export default User;